<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
<meta charset="UTF-8" />
<title>菜系</title>
</head>
<body>
	<div th:replace="header :: header"></div>
	<h1>菜系</h1>
	<div>
		<table border='1' cellspacing='0' cellpadding='5px'>
			<thead>
				<tr>
					<td>序号</td>
					<td>菜系</td>
					<td>操作</td>

				</tr>
			</thead>
			<tbody>

				<tr th:each="foodtype : ${foodtypes}">
					<td th:text="${foodtype.id}"></td>
					<td th:text="${foodtype.typeName}"></td>

					<td><a href="#" class="delFoodtypeBtn">
							<button>删除</button>
					</a></td>
				</tr>
			</tbody>
		</table>
		<h1>修改菜系</h1>

		<form>
			<p>
				<label>序号：</label><input type="text" class="editid" name="id" />
			</p>
			<p>
				<label>菜系：</label><input type="text" class="editFoodtype"
					name="typeName" />
			</p>
			<button type="button" class="editFoodtypeBtn">提交</button>
			<button type="reset">重置</button>
		</form>

	</div>

	<h1>增加菜系</h1>
	<form>
		<p>
			<label>菜系：</label><input type="text" class="addtypeName"
				name="type_name" />
		</p>
		<a><button type="button" class="addFoodtypeBtn">提交</button></a>
		<button type="reset">重置</button>
	</form>

	<div th:replace="footer :: footer"></div>

	<script type="text/javascript">
		$(window).load(function() {

			//添加菜品
			$('.addFoodtypeBtn').click(function() {

				var typeName = $('.addtypeName').val();

				$.ajax({
					type : 'POST',
					url : '/addFoodtype',
					data : {
						typeName : typeName
					},
					dataType : 'json',
					success : function(data) {
						//判断成功与否
						if (data.success) {
							alert('菜品添加成功！');
							window.location.reload();
						} else {
							alert('添加失败');
						}
					},
					error : function(data) {
						alert('添加时发生错误！');
					}
				});
				

			});

			//修改菜品
			$('.editFoodtypeBtn').click(function() {
				var id = $('.editid').val();
				var typeName = $('.editFoodtype').val();

				$.ajax({
					type : 'POST',
					url : '/editFoodtype',
					data : {
						id : id,
						typeName : typeName

					},
					dataType : 'json',
					success : function(data) {
						//判断成功与否
						if (data.success) {
							alert('所选菜品修改成功！');
							window.location.reload();
						} else {
							alert('删除失败1');
						}
					},
					error : function(data) {
						alert('删除失败2');
					}
				});

			});

			$('.delFoodtypeBtn').click(function() {
				if (!confirm("确认要删除该菜系？")) {
					window.event.returnValue = false;
				} else {
					var id = $(this).parent().siblings().eq(0).text();
					$.ajax({
						type : 'POST',
						url : '/delFoodtype',
						data : {
							id : id
						},
						dataType : 'json',
						success : function(data) {
							//判断成功与否
							if (data.success) {
								alert('所选菜品删除成功！');
								window.location.reload();
							} else {
								alert('删除失败1');
							}
						},
						error : function(data) {
							alert('删除失败2');
						}
					});
				}

			});

		});
	</script>
</body>
</html>

